<div id="product" class="page-layout carded fullwidth inner-scroll">

    <!-- TOP BACKGROUND -->
    <div class="top-bg accent"></div>
    <!-- / TOP BACKGROUND -->

    <!-- CENTER -->
    <div class="center">

        <!-- HEADER -->
        <div class="header accent" fxLayout="row" fxLayoutAlign="space-between center">

            <!-- APP TITLE -->
            <div fxLayout="row" fxLayoutAlign="start center">

                <button mat-icon-button class="mr-0 mr-sm-16" [routerLink]="'/apps/e-commerce/products'">
                    <mat-icon>arrow_back</mat-icon>
                </button>

                <div class="product-image mr-8 mr-sm-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
                    <img *ngIf="product.images[0]" [src]="product.images[0].url">
                    <img *ngIf="!product.images[0]" [src]="'assets/images/ecommerce/product-image-placeholder.png'">
                </div>

                <div fxLayout="column" fxLayoutAlign="start start"
                     [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">
                    <div class="h2" *ngIf="pageType ==='edit'">
                        {{product.name}}
                    </div>
                    <div class="h2" *ngIf="pageType ==='new'">
                        新增商品
                    </div>
                    <div class="subtitle secondary-text">
                        <span>商品细节</span>
                    </div>
                </div>
            </div>
            <!-- / APP TITLE -->

            <button mat-raised-button
                    class="save-product-button"
                    [disabled]="productForm.invalid"
                    *ngIf="pageType ==='new'" (click)="addProduct()">
                <span>确定添加</span>
            </button>

            <button mat-raised-button
                    class="save-product-button"
                    [disabled]="productForm.invalid || productForm.pristine"
                    *ngIf="pageType ==='edit'" (click)="saveProduct()">
                <span>保存商品</span>
            </button>
        </div>
        <!-- / HEADER -->

        <!-- CONTENT CARD -->
        <div class="content-card">

            <!-- CONTENT -->
            <div class="content">

                <form name="productForm" [formGroup]="productForm" class="product w-100-p" fxLayout="column" fxFlex>

                    <mat-tab-group>

                        <mat-tab label="基本信息">

                            <div class="tab-content p-24" basePerfectScrollbar>

                                <mat-form-field appearance="outline" floatLabel="always" class="w-100-p">
                                    <mat-label>商品名称</mat-label>
                                    <input matInput placeholder="商品名称"
                                           name="name"
                                           formControlName="name"
                                           required>
                                </mat-form-field>

                                <mat-form-field appearance="outline" floatLabel="always" class="w-100-p">
                                    <mat-label>商品描述</mat-label>
                                    <textarea matInput placeholder="商品描述"
                                              name="description"
                                              formControlName="description"
                                              rows="5">
                                    </textarea>
                                </mat-form-field>

                                <mat-form-field appearance="outline" floatLabel="always" class="w-100-p">

                                    <mat-label>分类</mat-label>

                                    <mat-chip-list #categoryList name="categories" formControlName="categories">

                                        <mat-chip *ngFor="let category of product.categories"
                                                  [removable]="true" (removed)="product.removeCategory(category)">
                                            {{category}}
                                            <mat-icon matChipRemove>cancel</mat-icon>
                                        </mat-chip>

                                        <input [matChipInputFor]="categoryList"
                                               [matChipInputAddOnBlur]="true"
                                               (matChipInputTokenEnd)="product.addCategory($event)"/>

                                    </mat-chip-list>

                                </mat-form-field>

                                <mat-form-field appearance="outline" floatLabel="always" class="w-100-p">

                                    <mat-label>标签</mat-label>

                                    <mat-chip-list #tagList name="tags" formControlName="tags">

                                        <mat-chip *ngFor="let tag of product.tags"
                                                  [removable]="true" (removed)="product.removeTag(tag)">
                                            {{tag}}
                                            <mat-icon matChipRemove>cancel</mat-icon>
                                        </mat-chip>

                                        <input [matChipInputFor]="tagList"
                                               [matChipInputAddOnBlur]="true"
                                               (matChipInputTokenEnd)="product.addTag($event)"/>

                                    </mat-chip-list>

                                </mat-form-field>

                            </div>

                        </mat-tab>

                        <mat-tab label="商品图片">

                            <div class="tab-content p-24" basePerfectScrollbar>
                                <div fxLayout="row wrap" fxLayoutAlign="start start">

                                    <div *ngIf="product.images.length === 0"
                                         class="product-image" fxlayout="row" fxLayoutAlign="center center">
                                        <img class="media"
                                             [src]="'assets/images/ecommerce/product-image-placeholder.png'">
                                    </div>

                                    <div *ngFor="let image of product.images">
                                        <div *ngIf="product.images.length > 0"
                                             class="product-image" fxlayout="row" fxLayoutAlign="center center">
                                            <img class="media" [src]="image.url">
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </mat-tab>

                        <mat-tab label="定价">

                            <div class="tab-content p-24" basePerfectScrollbar>

                                <mat-form-field appearance="outline" floatLabel="always" class="w-100-p">
                                    <mat-label>免税价</mat-label>
                                    <input matInput placeholder="免税价"
                                           name="priceTaxExcl"
                                           formControlName="priceTaxExcl"
                                           type="number">
                                    <span matPrefix>￥&nbsp;</span>
                                </mat-form-field>

                                <mat-form-field appearance="outline" floatLabel="always" class="w-100-p">
                                    <mat-label>含税价</mat-label>
                                    <input matInput placeholder="含税价"
                                           name="priceTaxIncl"
                                           formControlName="priceTaxIncl"
                                           type="number">
                                    <span matPrefix>￥&nbsp;</span>
                                </mat-form-field>

                                <mat-form-field appearance="outline" floatLabel="always" class="w-100-p">
                                    <mat-label>税率</mat-label>
                                    <input matInput placeholder="税率"
                                           name="taxRate"
                                           formControlName="taxRate"
                                           type="number">
                                    <span matPrefix>&#37;&nbsp;</span>
                                </mat-form-field>

                                <mat-form-field appearance="outline" floatLabel="always" class="w-100-p">
                                    <mat-label>原价格</mat-label>
                                    <input matInput placeholder="原价格"
                                           name="comparedPrice"
                                           formControlName="comparedPrice"
                                           type="number">
                                    <span matPrefix>￥&nbsp;</span>
                                    <mat-hint align="start">添加一个比较价格，以显示在实际价格旁边。
                                    </mat-hint>
                                </mat-form-field>

                            </div>
                        </mat-tab>

                        <mat-tab label="库存">

                            <div class="tab-content p-24" basePerfectScrollbar>

                                <mat-form-field appearance="outline" floatLabel="always" class="w-100-p">
                                    <mat-label>商品SKU</mat-label>
                                    <input matInput placeholder="商品SKU"
                                           name="sku"
                                           formControlName="sku">
                                </mat-form-field>

                                <mat-form-field appearance="outline" floatLabel="always" class="w-100-p">
                                    <mat-label>库存</mat-label>
                                    <input matInput placeholder="库存"
                                           name="quantity"
                                           formControlName="quantity"
                                           type="number">
                                </mat-form-field>

                            </div>

                        </mat-tab>

                        <mat-tab label="快递设置">

                            <div class="tab-content p-24" basePerfectScrollbar fxLayout="column">

                                <div fxLayout="row" fxLayoutAlign="space-between">

                                    <mat-form-field appearance="outline" floatLabel="always" fxFlex="30">
                                        <mat-label>长</mat-label>
                                        <input matInput placeholder="长"
                                               name="Width"
                                               formControlName="width">
                                        <span matSuffix>cm</span>
                                    </mat-form-field>

                                    <mat-form-field appearance="outline" floatLabel="always" fxFlex="30">
                                        <mat-label>高</mat-label>
                                        <input matInput placeholder="高"
                                               name="Height"
                                               formControlName="height">
                                        <span matSuffix>cm</span>
                                    </mat-form-field>

                                    <mat-form-field appearance="outline" floatLabel="always" fxFlex="30">
                                        <mat-label>宽</mat-label>
                                        <input matInput placeholder="宽"
                                               name="Depth"
                                               formControlName="depth">
                                        <span matSuffix>cm</span>
                                    </mat-form-field>

                                </div>

                                <mat-form-field appearance="outline" floatLabel="always" class="w-100-p">
                                    <mat-label>重量</mat-label>
                                    <input matInput placeholder="重量"
                                           name="Weight"
                                           formControlName="weight">
                                    <span matSuffix>kg</span>
                                </mat-form-field>

                                <mat-form-field appearance="outline" floatLabel="always" class="w-100-p">
                                    <mat-label>运费</mat-label>
                                    <input matInput placeholder="运费"
                                           name="extraShippingFee"
                                           formControlName="extraShippingFee"
                                           type="number">
                                    <span matPrefix>￥&nbsp;</span>
                                </mat-form-field>

                            </div>

                        </mat-tab>

                    </mat-tab-group>

                </form>

            </div>
            <!-- / CONTENT -->

        </div>
        <!-- / CONTENT CARD -->

    </div>
    <!-- / CENTER -->

</div>
